<template>
  <div>
    <!-- v-if和v-else需要连用， 之间不能放其它的标签 -->
    <p v-if="age <= 18">少年</p>
    <p v-else>成年</p>

    <hr />

    <!-- v-if和v-else v-else-if需要连用，之间不能放其它的标签 -->
    <!-- 小于14岁是少年 -->
    <p v-if="age <= 14">少年</p>
    <!-- 大于14岁， 小于35是青年 -->
    <p v-else-if="age < 35">青年</p>
    <!-- 大于35岁， 小于60是中年 -->
    <p v-else-if="age < 60">中年</p>
    <!-- 大于60岁， 小于75是中老年 -->
    <p v-else-if="age < 75">中老年</p>
    <!-- 大于75是老年 -->
    <p v-else>老年</p>

    <button @click="age += 10">长大</button>
  </div>
</template>

<script>
/*
  学习目标：v-if多条件控制
*/

export default {
  data() {
    return {
      age: 8,
    };
  },
};
</script>

<style></style>
